<template>
	<w-container id='action-pwd' class='plr-13' :loading="loading">
		<w-navbar navType="default" id="my-nav" bgColor='#fff' title="设置操作密码"></w-navbar>

		<view class="plr-16 ptb-80 mt-80">
			<u--form labelPosition="left" :model="form" :rules="rules" ref="form1">
				<u-form-item prop="password" ref="item1">
					<u--input :placeholder="handleLang('请输入操作密码')" color="#222" border="bottom" clearable v-model="form.password" type='password'>
					</u--input>
				</u-form-item>
				<u-form-item prop="re_password" ref="item1" class='mt-24'>
					<u--input :placeholder="handleLang('请确认操作新密码')" color="#222" border="bottom" v-model="form.re_password" clearable
						type='password'></u--input>
				</u-form-item>
			</u--form>
			<view class="font-size-10 font-color-minor mt-12">
				{{handleLang('请输入6位数字密码')}}
			</view>
		</view>

		<view class="action">
			<w-button style='width: 100%;' :disabled="disabled" @click='submit'>{{handleLang('确认')}}</w-button>
		</view>
	</w-container>
</template>

<script>
	import {
		cehckPayPassword,
		setActionPwd
	} from '@/api/user/index.js'
	import {
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				loading: false,
				form: {
					password: null,
					re_password: null,
					captcha: null,
				},
				rules: {
					password:{
						message:"请输入6位数字密码",
						trigger:"change",
						validator(rule,value){
							return !Number.isNaN(Number(value))
						}
					},
					re_password:{
						message:"请输入6位数字密码",
						trigger:"change",
						validator(rule,value){
							return !Number.isNaN(Number(value))
						}
					}
				}
			};
		},
		computed: {
			disabled() {
				if (Number.isNaN(Number(this.form.password))) {
					return true
				}
				return !(this.form.password && this.form.password == this.form.re_password && this.form.password.length ==
					6)
			}
		},
		onLoad({
			code
		}) {
			this.form.captcha = code;
		},
		methods: {
			...mapActions('user', ['getUserInfo']),
			submit() {
				uni.showLoading({
					title: "设置中"
				})
				let _this = this;
				setActionPwd(this.form).then(res => {
					this.getUserInfo().then(() => {
						uni.showToast({
							title: res.msg,
							success() {
								setTimeout(() => {
									uni.navigateBack({
										delta: 2
									})
								}, 1500)
							}
						})
					})
				})
			}

		}
	}
</script>

<style lang="scss">
	#action-pwd {
		/deep/ .u-code-input__item {
			background-color: #ECECEC;
			@extend .br-8;
		}
		/deep/ .u-form-item__body__right__message{
			margin-left: 0 !important;
		}

		.action {
			width: 100%;
			position: fixed;
			left: 0;
			bottom: 0;
			@extend .plr-12;
			padding-bottom: calc(48rpx + var(--window-bottom));
		}
	}
</style>
